<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <title>报警统计</title>
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="../plugins/ElementUI/index-2.3.9.css">
  <link href="../css/common.css" rel="stylesheet">
  <style type="text/css">
    .el-aside {
      color: #333;
      padding: 10px;
    }
    .el-main {
      color: #333;
      text-align: center;
    }
    /* baidu map */
    /* body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} */
    #the_chart{width:100%;height:calc(100% - 45px);overflow: hidden;margin:0;font-family:"微软雅黑";}
    .chanceSpliteBtn{
      float: right;
      width: 400px;
      text-align: right
    }   
  </style>  
  <!-- map -->
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ePOIA9rln4os58j2HQnx3AW0Sdy9MiQv"></script>
  <script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>  
  <!-- import Vue before Element -->
  <script src="../plugins/ElementUI/vue-2.5.16.js" type="text/javascript"></script>
  <!-- import JavaScript -->
  <script src="../plugins/ElementUI/index-2.3.9.js" type="text/javascript"></script>
  <script src="../plugins/ElementUI/vue-resource.min.js"></script>
  <script src="../plugins/ECharts/echarts-4.1.0.js"></script>

</head>
<body>
  <div id="app" v-cloak class="animated fadeInRight">
    <el-container>
      <el-header>
          <div style="overflow: hidden">
            <div style="float: left">
                <span>报警统计</span>
            </div>
            <div class="chanceSpliteBtn">
                <el-row>
                  <el-col :span="8">
                    <el-button type="text" size="small" @click="shortcuts('week')">本周</el-button>
                    <el-button type="text" size="small" @click="shortcuts('month')">本月</el-button>
                    <el-button type="text" size="small" @click="shortcuts('quarter')">三个月</el-button>                      
                  </el-col>
                  <el-col :span="13" :offset="1">
                      <el-date-picker
                        v-model="intervalTime"
                        type="daterange"
                        size="small"
                        style="width:220px;font-size: 12px"
                        range-separator="~"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        @change="onChange">
                      </el-date-picker>
                  </el-col>
                </el-row>
            </div>
          </div>        
      </el-header>      
      <el-container>
        <el-main>
          <div id="the_chart"></div> 
        </el-main>
        <el-aside width="400px" :style="{height:contentHeight+'px'}">
            <div id="the_radar" style="width: 390px;height:390px;"></div>             
        </el-aside>
      </el-container>
    </el-container>
    <el-dialog title="故障报警统计详情" :visible.sync="dialogTableVisible">
          <el-table :data="tripList" style="width: 100%" size="middle">
            <el-table-column prop="plateNo" label="车牌号"></el-table-column>
            <el-table-column prop="totalStorageFaults" label="可充电储能装置故障总数"></el-table-column>
            <el-table-column prop="totalMotorFaults" label="驱动电机故障总数"></el-table-column>
            <el-table-column prop="totalEngineFaults" label="发动机故障总数"></el-table-column>
            <el-table-column prop="totalOtherFaults" label="其他故障总数"></el-table-column>
            <el-table-column prop="time" label="时间"></el-table-column>
            <!-- <el-table-column prop="totalSocUse" label=" 总行程耗电量"  width="120">
              <template slot-scope="scope">
                  <span style="color:#f0ad4e">{{scope.row.totalSocUse}}%</span>
              </template>
            </el-table-column> -->
          </el-table>
          <!--          
          <div style="height:10px"></div>
          <el-pagination
            background
            small
            layout="prev, pager, next"
            @current-change="handleCurrentChangeBattery"
            :current-page.sync="tripChargeParam.page"
            :page-size="tripChargeParam.pageSize"
            :total="tripChargeList.totalCount">
          </el-pagination> -->
    </el-dialog>
  </div>
</body>
  <script src="../plugins/Underscore/underscore-min.js"></script>
  <script src="../js/ApiRequest.js"></script>
  <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: function() {
        return { 
          appShow:false,
          contentHeight: (window.innerHeight||(document.documentElement&&document.documentElement.clientHeight)||document.body.clientHeight) - 97,
          warnChargeList:[],//折线图原始数据
          warnChargeRadar:{},//雷达图原始数据
          tripList:[],
          tripChargeParam:{
            page:1,
            pageSize:20
          },
          theEchart:null,
          optionChart:null,
          intervalTime:null,//时间选择
          spliteTime:{},//报警统计总数-时间选择
          dialogTableVisible: false,
        }
      },
      mounted:function(){
        this.$nextTick(function(){
          this.postAlarmTotalInfoList()
          this.initChart()
        })
      },
      methods: {
          // init 图表
          initChart:function(){
            // 折线图
            this.chart = document.getElementById("the_chart")
            if(this.chart.offsetWidth){
              this.theEchart = echarts.init(this.chart);
              this.optionChart = {
                  legend:{},
                  toolbox: {
                    trigger: 'axis'
                  },
                  tooltip : {
                      trigger: 'axis',
                      axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                          type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                      }
                  },
                  grid: {
                      left: '3%',
                      right: '4%',
                      bottom: '3%',
                      containLabel: true
                  },
                  xAxis : [
                      {
                          type : 'category',
                          data : [],
                          axisTick: {
                              alignWithLabel: true
                          }
                      }
                  ],
                  yAxis : [
                      {
                          type : 'value',
                          // name:"百分比(100%)"
                      }
                  ],
                  series : [
                      {
                          name:'百公里能耗',
                          type:'bar',
                          barWidth: '60%',
                          data:[]
                      }
                  ]
              }
              this.theEchart.setOption(this.optionChart);
              this.theEchart.on('click', function(params){
                vm.postTripCharge(params.name)
              });
            }else{
              this.initChart()
            }
            // 雷达图
            this.chartRadar = echarts.init(document.getElementById('the_radar'));
            this.optionRadar = {  
                color:'#AED4C2',
                title:{text:"报警总数统计",textStyle:{fontSize:15}},              
                tooltip: {
                    trigger: 'axis'
                },
                radar: [
                    {
                        indicator: [
                            {text: '可充电储能装置故障总数'},
                            {text: '发动机故障总数'},
                            {text: '驱动电机故障总数'},
                            {text: '其他故障总数'},
                        ],
                        // center: ['25%','40%'],
                        radius: 95
                    },
                ],
                series: [
                    {
                        type: 'radar',
                        tooltip: {
                            trigger: 'item'
                        },
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},
                        data: [
                            {
                                value: [60,73,85,40],
                                name: '报警总数'
                            }
                        ]
                    }
                ] 
            };        
          },
          // 记录分页
          handleCurrentChangeBattery:function(){
            this.postTripCharge()
          },
          // 请求信息数据
          postTripCharge:function(time){
            var _this = this;
            var data = { 
              startTime: time + " 00:00:00",
              endTime: time + " 23:59:59"
            }
            resourceRequst("/alarm/queryAlarmTotalInfoListInVin",data,function(res){              
              _this.tripList = res.list
            })
          },
          // 查询故障报警统计信息,按照日期统计
          postAlarmTotalInfoList:function(){
            var data = {
              startTime:this.spliteTime.startTime || moment().locale('zh-cn', { week: {dow: 1}}).weekday(1).format('YYYY-MM-DD 00:00:00'),
              endTime:this.spliteTime.endTime || moment().locale('zh-cn', { week: {dow: 1}}).weekday(7).format('YYYY-MM-DD 23:59:59'),
            }
            resourceRequst("/alarm/queryAlarmTotalInfoList",data,function(res){           
                vm.warnChargeList = res.list
                vm.warnChargeRadar = res.totalCount
                if(!res.totalCount) vm.$message.warning('暂无统计 数据！')
            })
          },
          shortcuts:function(res){
            var data = {
              startTime:"",
              endTime:""
            }
            switch(res){
              case 'week':                
                data.startTime = moment().locale('zh-cn', { week: {dow: 1}}).weekday(1).format('YYYY-MM-DD 00:00:00');//周一日期
                data.endTime = moment().locale('zh-cn', { week: {dow: 1}}).weekday(7).format('YYYY-MM-DD 23:59:59');//周日日期
                break;
              case 'month':
                data.startTime = moment().startOf("month").format('YYYY-MM-DD 00:00:00')
                data.endTime = moment().endOf("month").format('YYYY-MM-DD 23:59:59')
                break;
              case 'quarter':
                data.startTime = moment().month(moment().month()-2).format('YYYY-MM-01 00:00:00')
                data.endTime = moment().endOf("month").format('YYYY-MM-DD 23:59:59')
                break;
            }
            this.spliteTime = data
            this.intervalTime = [data.startTime,data.endTime]
            this.postAlarmTotalInfoList()
          },
          onChange:function(res){
            var data = {
              startTime:res[0]+" 00:00:00",
              endTime:res[1]+" 23:59:59"
            }
            this.spliteTime = data
            this.postAlarmTotalInfoList()
          }
        },
      watch:{
        tripList:function(res){
          this.dialogTableVisible = true
        },
        warnChargeRadar:function(res){
          var value = null;
          if(res){
            value =[res.totalStorageFaults,res.totalEngineFaults,res.totalMotorFaults,res.totalOtherFaults];
          }else{
            value =[0,0,0,0];
          }
          this.optionRadar.series[0].data[0].value = value
          this.chartRadar.setOption(this.optionRadar);
        },
        warnChargeList:function(res){
          var series = [{
              name:'可充电储能装置故障总数',
              type:'bar',
              stack: '总量',
              smooth: true,
              data:[]
            },{
              name:'驱动电机故障总数',
              type:'bar',
              stack: '总量',
              smooth: true,
              data:[]
            },{
              name:'发动机故障总数',
              type:'bar',
              stack: '总量',
              smooth: true,
              data:[]
            },{
              name:'其他故障总数',
              type:'bar',
              stack: '总量',
              smooth: true,
              data:[]
          }]
          _.each(res,function(item){
            series[0].data.push(item.totalStorageFaults)
            series[1].data.push(item.totalMotorFaults)
            series[2].data.push(item.totalEngineFaults)
            series[3].data.push(item.totalOtherFaults)
          })
          // echarts 图表
          this.optionChart.xAxis[0].data = _.map(res,function(item){
            return item.time
          });
          this.optionChart.series = series
          this.theEchart.setOption(this.optionChart);
        },
      }
    })
    window.onresize = function () {//重置容器高宽
        if(vm && vm.theEchart){
          vm.theEchart.resize();
        }
    };
  </script>
</html>